<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ num }}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: changeType==='one'}" @click="changFn('one')" href="javascript:;">全部</a>
			</li>
			<li>
				<a :class="{selected: changeType==='two'}" @click="changFn('two')" href="javascript:;">未完成</a>
			</li>
			<li>
				<a :class="{selected: changeType==='three'}" @click="changFn('three')" href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="show" @click="del">清除已完成</button>
	</footer>
</template>

<script>
	export default {
     data() {
			return {
			  changeType: 'one',
			};
		 },

      props: {
				  arr: {
						 type: Array,
						 required: true
					}
			},

			computed: {
				  num() {
						  return this.arr.filter(item => !item.isDone).length
					},

					show(){
						   return this.arr.some(item => item.isDone)
					}
			},

			methods: {
				  del(){
						  this.$emit('delShow')
					},

					changFn(type){
						  this.changeType = type

							this.$emit('changeType', type)
					}
			}

	}
</script>
